<div class="f-nav-detail">
	<detail-nav></detail-nav>
</div>
<div class="wrap">
	<div class="banner"><img src="{{bannerSrc}}" alt=""/><p ng-bind="title"></p></div>
	<div class="title"><span ng-bind="category.catalogName"></span></div>
	<div class="content">
		<div class="content-title">
			<img src="./them/img/span1.png" alt=""/><span>工程e学堂</span>
		</div>
		<ul>
			<li ng-repeat="item in dataList">
				<img src="{{item.previewPath}}" alt=""/>
				<p ui-sref="eng.vedioDetails({courseId:item.courseId})">{{item.title}}</p>
				<div>
					<span>{{item.count}}人在学习</span>
					<span>讲师：{{item.name}}</span>
					<div>
						<span class="money">{{item.price}}</span>
						<span>积分</span>
					</div>
				</div>
			</li>
		</ul>
		<div class="page-index">
			<ui-pagination ng-if="paginationConf" conf="paginationConf"></ui-pagination>
		</div>
</div>
</div>
<div ng-include="'app/business/common/footer.html'"></div>
<style>
	.page-index{
		height:71px;
	}
	.page-index>div{
		display: flex;
		justify-content: center;
	}
	.page-index>div .pagination{
		margin-left: 0;
	}
	*{
		box-sizing: border-box;
	}
	body{
		background: url("them/img/jb-bg.png") 0px 0px repeat;
		background-size: 600px 600px;
	}
	.wrap{
		width:1200px;
		margin:0 auto;
		margin-bottom:50px;
	}
	.banner{
		padding:10px 0;
		position: relative;
	}
	.banner p{
		color:white;
		font-size:30px;
		font-weight: bold;
		position: absolute;
		top:0;
		left:0;
		line-height:120px;
		padding-left:20px;
		text-shadow:5px 5px 15px rgba(0,0,0,.7);
	}
	.title{
		width:100%;
		height:60px;
		background:white;
		border-top:2px solid #ff6638;
		line-height:60px;
		margin:5px 0 10px 0;
	}
	.title span{
		color:#333333;
		font-size:20px;
		font-weight:bold;
		padding-left:20px;
	}
	.content{
		width:100%;
		padding:20px 20px 0 20px;
		background:white;
	}
	.content-title{
		line-height:22px;
	}
	.content-title img{
		vertical-align:middle;
	}
	.content-title span{
		color:#000000;
		font-size:18px;
		font-weight: bold;
		vertical-align:middle;
		padding-left:10px;
	}
	.content>ul{
		margin-top:20px;
	}
	.content>ul li{
		width:270px;
		height:235px;
		overflow: hidden;
		margin-bottom:20px;
		display: inline-block;
		margin-right:26px;
	}
	.content>ul li img{
		display: block;
		width:270px;
		height:172px;
	}
	.content>ul li p{
		font-size:16px;
		line-height:45px;
		height:45px;
		color:#333333;
	}
	.content>ul li p:hover{
		color:#30a3ff;
		cursor: pointer;
	}
	.content>ul li>div{
		color:#999999;
		display: flex;
		justify-content: space-between;
	}
	.content>ul li>div>span:nth-child(2){
		margin-left:-65px;
	}
	.content>ul li>div div{
		display: inline-block;
	}
	.content>ul li .money{
		color:#eb6941;
		font-size:14px;
		font-weight: bold;
	}
</style>